<template>
  <div>
    <div class="pd-tb20 pd-lr30" style="background-color: #efefef">
      {{ searchKey }}
    </div>
    <div class="pd-lr30">
      <div style="position: relative">
        <el-tabs v-model="activeName" @tab-change="tabChange">
          <el-tab-pane
            v-for="item in tabList"
            :label="item.label"
            :name="item.value"
            :key="item.value"
          />
        </el-tabs>
        <div class="search-feedback font-13" v-if="!loading">
          <span>找到{{ listData.length }}{{ currentNode?.unit }}{{ currentNode?.label }}</span>
          <template v-if="isFeedback">
            <span class="pd-l10" style="color: #adadad">反馈已记录，非常感谢</span>
          </template>
          <template v-else>
            <span class="music-hover pd-lr10" @click="isFeedback = true">满意</span>
            <span class="music-hover" @click="isFeedback = true">不满意</span>
          </template>
        </div>
      </div>
      <el-skeleton class="pd-r12 pd-t5" :loading="loading" animated>
        <template #template>
          <el-skeleton :rows="10" />
        </template>
        <template #default>
          <template v-if="listData.length">
            <songSearch :list="listData" v-if="currentNode?.value === 'song'" />
            <albumSearch :list="listData" v-if="currentNode?.value === 'album'" />
            <lyricSearch :list="listData" v-if="currentNode?.value === 'lyric'" />
            <singerSearch :list="listData" v-if="currentNode?.value === 'singer'" />
          </template>
          <div v-else>
            <div>
              没有与 "
              <span class="music-color">{{ searchKey }}</span>
              " 相关的结果
            </div>
            <div>输入的关键字是否有误或过长</div>
            <div>
              或加qq:
              <span class="music-color">1980350792</span>
              ,向我投诉或者建议吧
            </div>
          </div>
        </template>
      </el-skeleton>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, computed, inject, watch } from 'vue'
  import type { Ref } from 'vue'
  import type { TabPaneName } from 'element-plus'
  import useLoading from '@/hooks/useLoading'
  import { getSongSerch, getAlbumSerch } from '@/api/search'
  import albumSearch from './components/albumSearch.vue'
  import lyricSearch from './components/lyricSearch.vue'
  import singerSearch from './components/singerSearch.vue'
  import songSearch from './components/songSearch.vue'

  // eslint-disable-next-line no-undef
  defineOptions({
    name: 'SearchPage'
  })
  const searchKey = inject<Ref<string>>('searchKey')

  const activeName = ref('song')
  const tabList = ref([
    { label: '歌曲', value: 'song', unit: '首' },
    { label: '专辑', value: 'album', unit: '张' },
    { label: '歌词', value: 'lyric', unit: '个' },
    { label: '歌手', value: 'singer', unit: '个' }
  ])

  const currentNode = computed(() => {
    return tabList.value.find(item => item.value === activeName.value)
  })

  const tabChange = (name: TabPaneName) => {
    init(name)
  }
  const { loading, openLoad, closeLoad } = useLoading()
  const listData = ref<any>([])
  const init = (name: TabPaneName) => {
    openLoad()
    switch (name) {
      case 'song':
        getSongSerch({
          searchKey: searchKey?.value
        }).then(res => {
          listData.value = res
          closeLoad()
        })
        break
      case 'album':
        getAlbumSerch({
          searchKey: searchKey?.value
        }).then(res => {
          listData.value = res
          closeLoad()
        })
        break
      case 'lyric':
        setTimeout(() => {
          closeLoad()
        }, 1000)
        break
      case 'singer':
        setTimeout(() => {
          closeLoad()
        }, 1000)
        break
      default:
        break
    }
  }

  // 反馈标记
  const isFeedback = ref(false)

  // init(tabList.value[0].value)
  if (searchKey) {
    watch(
      searchKey,
      () => {
        // console.log(newValue)
        // getSongData()
        init(activeName.value)
      },
      { immediate: true }
    )
  }
</script>

<style lang="scss" scoped>
  :deep(.el-tabs__item.is-active) {
    color: $musicColor;
  }
  :deep(.el-tabs__item:hover) {
    color: $musicColor;
  }

  :deep(.el-tabs__active-bar) {
    background-color: $musicColor;
  }
  :deep(.el-tabs__nav-wrap::after) {
    display: none;
  }
  .search-feedback {
    position: absolute;
    top: 13px;
    right: 0;
    span {
      color: #7b7b7b;
      &:nth-child(1) {
        color: #adadad;
      }
    }
  }
</style>
